<template>
  <!-- 购物车页面 -->
  <div class="cart">
    <div id="body">
      <div id="table">
        <ul class="thead-ul">
          <li>商品信息</li>
          <li>单价</li>
          <li>数量</li>
          <li>金额</li>
        </ul>
        <table id="id">
          <tr v-for="(v,k) in carts" :key="k" :name="v.cartID" :value="v.sum">
            <td width="100px">
              <input type="checkbox" :value="v.cartID" @click="check" name="test" />
            </td>
            <td height="100px">
              <img :src="getImg(v.cpic)" alt width="100px" height="100px" />
            </td>
            <td width="100px">{{v.cname}}</td>
            <td width="200px" class="both" valign="middle" :value='v.newmoney'>
              <div class="thorugh">{{v.pastprice}}</div>
              <br />
              <div class="none">{{v.newmoney}}</div>
            </td>
            <td width="200px" class="button">
              <span>
                <button class="el-icon-minus" @click="sub" disabled="false" v-if="v.num==1"></button>
                <button class="el-icon-minus" @click="sub" v-else></button>
                {{v.num}}
                <button class="el-icon-plus" @click="add"></button>
              </span>
            </td>
            <td width="200px">{{v.sum}}</td>
          </tr>
        </table>

        <div id="sum">
          <input type="checkbox" @click="checks" id="tests" />
          全选
          总金额：￥{{moneys}}
          <el-button type="danger" plain @click="DELS">删除</el-button>
        
          <router-link :to="{name:'pay',query:{id:this.cartIDs,moneys:this.moneys}}">  <el-button type="primary" plain>结算</el-button></router-link>
        </div>
      </div>
      <div id="none">
        <img src="../assets/disimages/cartempty.png" alt />
        <br />购物车什么也没有 快去购物吧
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      carts: [],
      userId: [],
      moneys: 0,
      cartIDs: []
    };
  },
  created() {
    this.$axios
      .get("http://localhost:3000/cart?userId=" + this.userId)
      .then(res => {
        this.carts = res.data.data;
        if (this.carts.length == 0) {
          document.querySelector("#none").style.display = "block";
        } else {
          document.querySelector("#table").style.display = "block";
        }
      })
      .catch(err => {
        console.log("错误", err);
      });
  },

  methods: {

    DELS() {
      console.log(this.cartIDs.toString());
      var cartID = this.cartIDs.toString();
      this.$axios
        .delete("http://localhost:3000/cart/delCarts?cartID=" + cartID)
        .then(res => {
          var boxes = document.getElementsByName("test");
          for (let i = 0; i < boxes.length; i++) {
            boxes[i].checked = false;
          }
          var boxe = document.querySelector("#tests");
          boxe.checked = false;
          this.$axios
            .get("http://localhost:3000/cart?userId=" + this.userId)
            .then(res => {
              this.carts = res.data.data;
              this.cartIDs = [];
              this.moneys = 0;
              if (this.carts.length == 0) {
                document.querySelector("#none").style.display = "block";
                document.querySelector("#table").style.display = "none";
              } else {
                document.querySelector("#table").style.display = "block";
                document.querySelector("#none").style.display = "none";
              }
            })
            .catch(err => {
              console.log("错误", err);
            });
        })
        .catch(err => {
          console.log("错误", err);
        });
    },
    sub(e) {
      let cartID = e.currentTarget.parentNode.parentNode.parentNode.getAttribute(
        "name"
      );
      let mon = e.currentTarget.parentNode.parentNode.previousSibling.getAttribute("value");
      console.log("购物车id", cartID);
      this.$axios
        .get("http://localhost:3000/cart/getcartID?cartID=" + cartID)
        .then(res => {
          let num = res.data.data[0].num;
          if (num > 1) {
            this.$axios
              .put(
                "http://localhost:3000/cart/updateCartsubnum?cartID=" + cartID
              )
              .then(res => {
                console.log(res);

                this.$axios
                  .get("http://localhost:3000/cart?userId=" + this.userId)
                  .then(res => {
                    this.carts = res.data.data;
                    var index = this.cartIDs.indexOf(cartID);
                    if (index != -1) {
                      this.moneys = parseFloat(this.moneys) - parseFloat(mon);
                    }
                    // document.querySelector('id').childNodes
                  })
                  .catch(err => {
                    console.log("错误", err);
                  });
              })
              .catch(err => {
                console.log("错误", err);
              });
          }
          console.log("数量");
        })
        .catch(err => {
          console.log("错误", err);
        });
    },
    add(e) {
      let cartID = e.currentTarget.parentNode.parentNode.parentNode.getAttribute(
        "name"
      );
      let mon = e.currentTarget.parentNode.parentNode.previousSibling.getAttribute("value");
      this.$axios
        .put("http://localhost:3000/cart/updateCart?cartID=" + cartID)
        .then(res => {
          console.log(res);

          this.$axios
            .get("http://localhost:3000/cart?userId=" + this.userId)
            .then(res => {
              this.carts = res.data.data;
                var index = this.cartIDs.indexOf(cartID);
              if (index != -1) {
                this.moneys = parseFloat(this.moneys) + parseFloat(mon);
              }
              // document.querySelector('id').childNodes
            })
            .catch(err => {
              console.log("错误", err);
            });
        })
        .catch(err => {
          console.log("错误", err);
        });
    },
    checks() {
      if (this.cartIDs.length == this.carts.length) {
        var boxes = document.getElementsByName("test");
        for (let i = 0; i < boxes.length; i++) {
          boxes[i].checked = false;
        }
        this.moneys = 0;
        this.cartIDs = [];
        console.log(this.cartIDs);
      } else {
        this.cartIDs = [];
        this.moneys = 0;
        this.cartIDs = [];
        var boxes = document.getElementsByName("test");

        for (let i = 0; i < boxes.length; i++) {
          this.cartIDs.push(boxes[i].value);
        }
        console.log(this.cartIDs);
        for (let i = 0; i < boxes.length; i++) {
          boxes[i].checked = true;
        }

        for (var i = 0; i < this.carts.length; i++) {
          this.moneys = this.moneys + this.carts[i].sum;
        }
      }
    },
    check(e) {
      let checked = e.currentTarget.getAttribute("value");
      let mon = e.currentTarget.parentNode.parentNode.getAttribute("value");
      console.log("选择", mon);

      if (this.cartIDs.length == this.carts.length) {
        var boxe = document.querySelector("#tests");
        boxe.checked = true;
      } else {
        var boxe = document.querySelector("#tests");
        boxe.checked = false;
      }
      if (this.cartIDs.indexOf(checked) == -1) {
        this.cartIDs.push(checked);
        // console.log(this.carts)
        if (this.cartIDs.length == this.carts.length) {
          var boxe = document.querySelector("#tests");
          boxe.checked = true;
        }
        this.moneys = parseFloat(this.moneys) + parseFloat(mon);
      } else {
        var index = this.cartIDs.indexOf(checked);
        this.cartIDs.splice(index, 1);
        this.moneys = parseFloat(this.moneys) - parseFloat(mon);
        if (this.cartIDs.length != this.carts.length) {
          var boxe = document.querySelector("#tests");
          boxe.checked = false;
        }
      }
      console.log(this.cartIDs);
    },

    getImg(pic) {
      let path = "http://localhost:3000/upload/" + pic;
      console.log("图片", path);
      return path;
    }
  }
};
</script>
<style lang="css" scoped >
td,
th {
  text-align: center;
  vertical-align: middle;
}
th,
.el-checkbox {
  font-size: 20px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}
table > tr {
  border-bottom: 1px solid #000;
  height: 100px;
}

ul {
  border: 1px solid rgba(65, 10, 10, 0.2);
  height: 50px;
  width: 1200px;
  text-align: center;
  line-height: 50px;
}

li {
  display: block;
  width: 200px;
  float: left;
}
li.check {
  width: 100px;
  padding-right: 17px;
}

.thorugh {
  text-decoration: line-through;
  font-size: 17px;
}
.none {
  font-size: 20px;
}

.button span {
  display: inline-block;
  width: 80px;
  text-align-last: justify;
}
span button {
  width: 20px;
  height: 20px;
}
#none {
  width: 100%;
  height: 400px;
  border: 1px solid #455677;
  display: none;
  text-align: center;
}
#table {
  display: none;
}
#sum > input {
  position: absolute;
  left: 20px;
}
#sum {
  position: relative;
  width: 1200px;
  height: 50px;
  text-align: right;

  position: fixed;
  bottom: 0px;
}
.navBarWrap {
  position: fixed;
  top: 0;
  z-index: 999;
}
#body {
  text-align: center;
}
</style>